<template>
  <div class="role-select">
    <el-select
      :modelValue="modelValue"
      multiple
      :multiple-limit="limit"
      placeholder="请选择角色"
      @update:modelValue="handleUpdateModelValue"
    >
      <el-option
        v-for="item in list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
import { getRoleListAPI } from "@/api/role";

export default {
  name: "RoleSelect",

  props: {
    modelValue: {
      type: Array,
      default() {
        return [];
      },
    },

    limit: {
      type: Number,
      default: 3,
    },
  },

  emits: ["update:modelValue"],

  data() {
    return {
      value1: [],
      // 角色列表数据
      list: [],
    };
  },

  methods: {
    handleUpdateModelValue(value) {
      console.log("value", value);
      // 将 vlaue 做为参数，通知给我的父组件
      this.$emit("update:modelValue", value);
    },

    refresh() {
      getRoleListAPI().then((data) => {
        this.list = data;
      });
    },
  },

  created() {
    this.refresh();
  },
};
</script>

<style lang="scss" scoped>
.role-select {
  width: 100%;

  .el-select {
    width: 100%;
  }
}
</style>
